во , ги истраживме основните принципи на корекција на боите и ја објаснивме важноста на работа со бои при уредувањето на сликите. и моделите на боја, како и процесот на од слики и да ги користите за да креирате уникатни визуелни стилови. Првиот дел од оваа серија RGB LAB extracting palettes Како што видовме во претходната статија, некои бои и палети се прикажани поинаку отколку што првично очекувавме. Ова се должи на фактот дека ги користевме наједноставните алатки – RGB моделот и Еуклидовото пресметување на растојанието. Но, прво малку теорија. The RGB Model Двете најпопуларни модели на бои - и - се фундаментално различни во начинот на кој ги претставуваат и обработуваат боите. RGB LAB на Моделот го користи , на и Секој канал може да има вредности од 0 до 255, што резултира со повеќе од 16 милиони можни бои. Овој модел е идеален за работа со слики прикажани на екрани, како компјутерски монитори, телевизори и паметни телефони сите го користат овој модел. RGB Red Green Blue RGB Key Features: Ѕидот Ѕидот Ѕидот Ѕидот Таа користи адитивен процес каде што боите се создаваат со комбинирање на црвена, зелена и сина светлина. Полесно е да се разбере и процесира на ниво на пиксели. Таа е ограничена во својата способност да ги претставува сите бои прецизно, бидејќи не ја одразува човечката перцепција на бојата. The LAB Model на Моделот претставува боја во три канали: , на и Овој модел е поблиску до тоа како луѓето ги перцепираат боите и е одговорен за бојата и осветленоста на сликата. LAB L (lightness) A (a color spectrum from green to red) B (a color spectrum from blue to yellow) LAB Key Features: Ѕидот Ѕидот Ѕидот Ѕидот L каналот ја контролира светлината, овозможувајќи прилагодување на светлината без промена на бојата. Каналите А и Б ги опишуваат нијансите на боите, овозможувајќи попрецизна контрола над широк спектар на бои. Лаб моделот е особено корисен во професионалното оценување на боите, бидејќи е повеќе разноврсен и овозможува прецизни прилагодувања на боите без да влијае на другите параметри на сликата. Во моделот LAB, осветленоста е одвоена од бојата, што овозможува да се прилагодат визуелните параметри на сликата без да се влијае на нејзината рамнотежа на бои. Color Calculation Algorithm and Using LAB За пресметување и примена на бои, нашата апликација користи Интегрирање на оваа библиотека во проектот ни овозможува да извршиме прецизни пресметки кои помагаат да се постигнат посакуваните резултати при обработка на слики. colorjs.io Еве пример за кодот што се користи во нашата апликација за работа со бои во моделот LAB: // Sample code for using colorjs.io in LAB model
const findClosestColor = (r, g, b) => {
  if (mode === "lab") {
    const color1 = new Color({ coords: [r / 255, g / 255, b / 255], space: "srgb" }).to("lab");
    let minDist = Infinity;
    let closest = [r, g, b];
    for (let i = 0; i < paletteLAB.length; i++) {
      const color2 = paletteLAB[i];
      const dist = color1.distance(color2);  // Calculating the distance between colors in LAB space
      if (dist < minDist) {
        minDist = dist;
        closest = palette[i];
      }
    }
    return closest;
  } else {
    // RGB calculations
    let minDist = Infinity;
    let closest = [r, g, b];
    for (let [pr, pg, pb] of palette) {
      const dist = Math.sqrt((r - pr) ** 2 + (g - pg) ** 2 + (b - pb) ** 2);
      if (dist < minDist) {
        minDist = dist;
        closest = [pr, pg, pb];
      }
    }
    return closest;
  }
};
 Овој блок на код се занимава со процесот на наоѓање на најблиската боја во дадена палета со пресметување на растојанието помеѓу бојата на целта и боите во палетата. или . на RGB LAB How This Works in Practice: Ѕидот Ѕидот Ѕидот 
 
 : The LAB color space is designed to align with human vision, separating brightness (L) from chromatic components (A and B). When matching colors in LAB, the algorithm ensures that the colors are compared in a perceptually accurate manner, meaning it prioritizes how we perceive color differences, not just the mathematical RGB difference. LAB Mode RGB режим: RGB боја просторот едноставно ја претставува бојата со интензитетот на црвената, зелената и сината светлина.Во овој режим, растојанието се пресметува директно врз основа на вредностите на бојата, што може да доведе до помала перцептивна точност, бидејќи не ги зема предвид нијансите на човечкото перцепција на бојата. Во професионално оценување на боите и обработка на слики, споредба на боите врз основа на е многу корисно затоа што имитира како човечкото око ги перцепира боите, овозможувајќи повеќе природни и визуелно атрактивни резултати. Користејќи го овој метод, апликацијата може да постигне подобра конзистентност при применување на палети на бои на слики, што го олеснува усогласувањето на боите со посакуваните стилови. LAB Optimization Challenge: LAB Computation Работејќи со боја модел бара значително повеќе компјутерски ресурси отколку работа со Ова е затоа што, во LAB, секоја боја е претставена не само со три канали (RGB), туку исто така вклучува дополнителни пресметки за да се добијат координатите на боите и нивните растојанија. LAB RGB За да го оптимизираме овој процес, ние воведевме за да се избегнат излишни пресметки. Палети создадени во режими се складираат во меморијата, и ако сликата не се промени, системот нема да го пресмета палетата. Ова помага значително да се забрза процесот, особено кога се применуваат палети на повеќе слики, со повторна употреба на претходно пресметаните податоци без да мора да ги изврши скапите пресметки повторно. palette caching LAB // Optimization with palette caching
const extractPalette = () => {
  if (!image || image === lastExtractedImageRef.current) return;  // Check for changes

  const img = new Image();
  img.src = image;
  img.onload = () => {
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0);

    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
    const colorMap = new Map();

    // Creating a color map
    for (let i = 0; i < imageData.length; i += 4) {
      const key = `${imageData[i]},${imageData[i + 1]},${imageData[i + 2]}`;
      colorMap.set(key, (colorMap.get(key) || 0) + 1);
    }

    const sorted = Array.from(colorMap.entries()).sort((a, b) => b[1] - a[1]);
    const topRaw = sorted.map(([str]) => str.split(",").map(Number));
    const topColors = filterColors(topRaw).slice(0, 10);

    const randomId = Math.floor(10000 + Math.random() * 90000);
    const name = `Palette_${randomId}`;

    setPalettes(prev => ({ ...prev, [name]: topColors }));
    setSelectedPalette(name);
    lastExtractedImageRef.current = image;  // Saving cache
  };
};
 Ова подобрување помага да се забрза перформансите на апликацијата, особено кога се обработуваат повеќе слични слики постојано. Palette Extraction and Application Екстракцијата на палети е процес на идентификување на најкарактеристичните и најживописни бои од сликата, кои потоа може да се користат за да се создадат филтри или визуелни стилови. Боја на појава и нејзината , обезбедување дека палетата не вклучува бои кои се премногу слични едни на други. frequency luminance Главниот механизам за екстракција на палетата е како што следува: const extractPalette = () => {
  // Check for image changes
  if (!image || image === lastExtractedImageRef.current) return;

  const img = new Image();
  img.src = image;
  img.onload = () => {
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0);

    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
    const colorMap = new Map();

    // Counting the frequency of occurrence of each color
    for (let i = 0; i < imageData.length; i += 4) {
      const key = `${imageData[i]},${imageData[i + 1]},${imageData[i + 2]}`;
      colorMap.set(key, (colorMap.get(key) || 0) + 1);
    }

    // Sorting by frequency and filtering similar colors
    const sorted = Array.from(colorMap.entries()).sort((a, b) => b[1] - a[1]);
    const topRaw = sorted.map(([str]) => str.split(",").map(Number));
    const topColors = filterColors(topRaw).slice(0, 10);  // Segmentation and filtering

    const randomId = Math.floor(10000 + Math.random() * 90000);
    const name = `Palette_${randomId}`;

    // Saving the palette
    setPalettes(prev => ({ ...prev, [name]: topColors }));
    setSelectedPalette(name);
    lastExtractedImageRef.current = image;
  };
};
 Овој код се користи за да се извлече палета од слика, каде што боите се филтрираат по осветленост и разлика.Со овој механизам, можете брзо да ги соберете најпредставни бои за понатамошна примена. Додадовме автоматско генерирање на имиња за извлечените палети за да се избегне заплетување на корисничкиот интерфејс со непотребни копчиња. Custom Palettes Една од алатките во нашата апликација е блок за создавање на сопствени палети. Оваа функција им овозможува на корисниците да креираат палети погодни за различни проекти, обезбедувајќи целосна контрола над боите. Процесот започнува со изборот на боја преку Корисникот може да избере боја од сликата или од надворешен извор. Секоја избрана боја автоматски се додава на листата со бои на корисникот, од која се создава палета. HexColorPicker По изборот на неколку бои, палетата може да се зачува со прилагодено име. Подоцна, може да се примени на испратената слика за да се постигне специфичен визуелен стил. Color Neutralization with Color Palettes Неутрализација на боите со палети на бои Тоа е важен аспект на игра критична улога во Тоа е процес во кој поединечни сцени или снимки, направени под различни услови на осветлување, може да се донесат до заеднички тон на боја.Ова обично се прави за да се обезбеди единствен визуелен стил во целиот филм и да се направат сцените визуелно конзистентни, без оглед на условите на снимање. Color neutralization color grading film post-production Да истражиме како се применуваат палети преку два иконични примери на кинематографски визуелен јазик. Palettes in the Movie “The Matrix” Филмот (1999), режиран од браќата Вачовски, стана иконичен поради својот уникатен визуелен стил, кој вклучува специфична зеленикава палета на бои. Овој стил на бои е дизајниран да ја визуелизира дигиталната реалност во која постојат главните ликови. “The Matrix” Зелена, црна и метална Main Colors Palette Application: Ѕидот Ѕидот Ѕидот Извлекување на зелени тонови: За да создадеме палета во стилот на Матрицата, можеме да ги извлечеме сите нијанси на зелено, црно и сиво од сликата. Со примена на овие тонови, можеме да го постигнеме ефектот на "дигиталната реалност" карактеристичен за филмот. Применување на нови слики: Кога ќе ја примениме оваа палета, боите на сликата ќе се променат, заменувајќи ги сите пиксели со оние најблиски до избраните бои од палетата, создавајќи го саканиот "кодиран" стил. Palettes in Wes Anderson’s Works е познат по своите живописни, шарени и симетрични визуелни решенија. Ѕидот и  all have his signature style, which features rich pastel colors and carefully selected palettes. One key element of his films is the harmony and contrast in color design. Wes Anderson “The Grand Budapest Hotel”, “Moonrise Kingdom”, “The French Dispatch”, : Пастелни нијанси, светли контрастни бои, црвено, жолто, тиркизно, зелено. Main Colors Palette Application: Ѕидот Ѕидот Ѕидот Екстракција на пастелни нијанси: Во филмовите на Вес Андерсон, пастелните бои често се користат. На пример, светли розови, сини и портокалови тонови. Можеме да ги извлечеме овие бои и да ги примениме на нова слика за да создадеме ефект кој личи на винтажна фотографија или да ја нагласиме стилизираната атмосфера. Во нашата апликација, можеме да ја извлечеме палетата од слика со филтрирање на боите по осветленост и контраст, со зачувување само на меките пастелни нијанси. Примена на нови слики: Откако палетата е извлечена, може да се примени на било која слика, давајќи му карактеристичен изглед кој потсетува на делата на Андерсон, со светли, но хармонични бои. Сега што можеме да извлечеме палети од референци, време е за некои експерименти! Бидејќи користиме палети ограничени во бројот на бои и ја извршуваме нашата апликација во прелистувачот (што значи користење на ограничени пресметковни ресурси), не треба да очекуваме извонредни резултати. Еве примери на обработени слики во двете RGB и LAB режими. Извлекување и примена на палети е клучен аспект на создавање на визуелни стилови, како што е стилот "Матрицата", стилот на Вес Андерсон или Денис Вилњев. Нашата апликација обезбедува визуелна алатка за работа со бои која им овозможува на корисниците да извлечат палети, да ги применат и да креираат уникатни визуелни ефекти. Во финалниот дел, ќе се фокусираме на фино прилагодување и оптимизирање на боите.

Read My Stories

Ова аудио е произведено на оригиналниот јазик на приказната!

Премногу долго; Да чита

Make resilience your competitive advantage

Оваа алатка за боја ја претвора секоја слика во сон на Вес Андерсон

About Author

КОМЕНТАРИ

ВИСЕТЕ ТАГОВИ

ОВОЈ СТАТИЈА БЕШЕ ПРЕТСТАВЕН ВО

Related Stories

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps